<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Apis-Battery &middot; pfan</title>
        <meta name="description" content="Battery Api  提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件，Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。
 方法  chargingchange levelchange chargingtimechange dischargingtimechange  navigator.getBattery().then(function(battery) { console.log(&#34;Battery charging? &#34; &#43; (battery.charging ? &#34;Yes&#34; : &#34;No&#34;)); console.log(&#34;Battery level: &#34; &#43; battery.level * 100 &#43; &#34;%&#34;); console.log(&#34;Battery charging time: &#34; &#43; battery.chargingTime &#43; &#34; seconds&#34;); console.log(&#34;Battery discharging time: &#34; &#43; battery.dischargingTime &#43; &#34; seconds&#34;); battery.addEventListener(&#39;chargingchange&#39;, function() { console.log(&#34;Battery charging? &#34; &#43; (battery.charging ? &#34;Yes&#34; : &#34;No&#34;)); }); battery.">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="generator" content="Hugo 0.73.0" />
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:title" content="Apis-Battery">
<meta property="og:description" content="Battery Api  提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件，Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。
 方法  chargingchange levelchange chargingtimechange dischargingtimechange  navigator.getBattery().then(function(battery) { console.log(&#34;Battery charging? &#34; &#43; (battery.charging ? &#34;Yes&#34; : &#34;No&#34;)); console.log(&#34;Battery level: &#34; &#43; battery.level * 100 &#43; &#34;%&#34;); console.log(&#34;Battery charging time: &#34; &#43; battery.chargingTime &#43; &#34; seconds&#34;); console.log(&#34;Battery discharging time: &#34; &#43; battery.dischargingTime &#43; &#34; seconds&#34;); battery.addEventListener(&#39;chargingchange&#39;, function() { console.log(&#34;Battery charging? &#34; &#43; (battery.charging ? &#34;Yes&#34; : &#34;No&#34;)); }); battery.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.steps.info/2019/05/21/battery/">
        <link rel="stylesheet" href="https://blog.steps.info/dist/site.css">
        <link rel="stylesheet" href="https://blog.steps.info/dist/syntax.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        
        
        
    </head>
    <body>
        
<script type="application/javascript">
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
var doNotTrack = (dnt == "1" || dnt == "yes");
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'XXX', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>


        <div id="wrapper">
            <header class="site-header">
                <div class="container">
                    <div class="site-title-wrapper">
                        
                            <h1 class="site-title">
                                <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                            </h1>
                        
                        <a class="button-square" href="https://blog.steps.info/index.xml"><i class="fa fa-rss"></i></a>
                        
                            <a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="https://twitter.com/pangel3" rel="me">
                                <i class="fa fa-twitter"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="https://gitlab.com/funnypan" rel="me">
                                <i class="fa fa-gitlab"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Github" title="Github" href="https://github.com/RazzilDarkbrew" rel="me">
                                <i class="fa fa-github-alt"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="https://stackoverflow.com/users/7784704/stepsinfo" rel="me">
                                <i class="fa fa-stack-overflow"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:gemini0525@foxmail.com">
                                <i class="fa fa-envelope"></i>
                            </a>
                        
                    </div>

                    <ul class="site-nav">
                        
                    </ul>
                </div>
            </header>

            <div id="container">


<div class="container">
    <article class="post-container" itemscope="" itemtype="http://schema.org/BlogPosting">
        <header class="post-header">
    <h1 class="post-title" itemprop="name headline">Apis-Battery</h1>
    
    <p class="post-date">
        <span>Published <time datetime="2019-05-21" itemprop="datePublished">Tue, May 21, 2019</time></span>
        <span>by</span>
        <span itemscope="" itemprop="author" itemtype="https://schema.org/Person">
            <span itemprop="name">
                <a href="https://github.com/RazzilDarkbrew" itemprop="url" rel="author">pfan</a>
            </span>
        </span>
    </p>
    
        <p class="post-reading post-line">
            <span>Estimated reading time: 1 min</span>
        </p>
    
</header>

        <div class="post-content clearfix" itemprop="articleBody">
    

    <h2 id="battery-api">Battery Api</h2>
<blockquote>
<p>提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件，Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。</p>
</blockquote>
<h2 id="方法">方法</h2>
<ul>
<li>chargingchange</li>
<li>levelchange</li>
<li>chargingtimechange</li>
<li>dischargingtimechange</li>
</ul>
<div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">navigator</span><span class="p">.</span><span class="nx">getBattery</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">battery</span><span class="p">)</span> <span class="p">{</span>

  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery charging? &#34;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">battery</span><span class="p">.</span><span class="nx">charging</span> <span class="o">?</span> <span class="s2">&#34;Yes&#34;</span> <span class="o">:</span> <span class="s2">&#34;No&#34;</span><span class="p">));</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery level: &#34;</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">level</span> <span class="o">*</span> <span class="mi">100</span> <span class="o">+</span> <span class="s2">&#34;%&#34;</span><span class="p">);</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery charging time: &#34;</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">chargingTime</span> <span class="o">+</span> <span class="s2">&#34; seconds&#34;</span><span class="p">);</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery discharging time: &#34;</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">dischargingTime</span> <span class="o">+</span> <span class="s2">&#34; seconds&#34;</span><span class="p">);</span>

  <span class="nx">battery</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;chargingchange&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery charging? &#34;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">battery</span><span class="p">.</span><span class="nx">charging</span> <span class="o">?</span> <span class="s2">&#34;Yes&#34;</span> <span class="o">:</span> <span class="s2">&#34;No&#34;</span><span class="p">));</span>
  <span class="p">});</span>

  <span class="nx">battery</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;levelchange&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery level: &#34;</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">level</span> <span class="o">*</span> <span class="mi">100</span> <span class="o">+</span> <span class="s2">&#34;%&#34;</span><span class="p">);</span>
  <span class="p">});</span>

  <span class="nx">battery</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;chargingtimechange&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery charging time: &#34;</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">chargingTime</span> <span class="o">+</span> <span class="s2">&#34; seconds&#34;</span><span class="p">);</span>
  <span class="p">});</span>

  <span class="nx">battery</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;dischargingtimechange&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&#34;Battery discharging time: &#34;</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">dischargingTime</span> <span class="o">+</span> <span class="s2">&#34; seconds&#34;</span><span class="p">);</span>
  <span class="p">});</span>

<span class="p">});</span>
</code></pre></div><p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/uPic/r63S43.png" alt="r63S43"></p>

</div>

        <footer class="post-footer clearfix">
    
        <p class="post-tags">
            <span>Tagged:</span>
            
            
                <a href="/tags/js/">js</a>, 
            
                <a href="/tags/apis/">apis</a>
            
        </p>
    

    <div class="share">
        
            <a class="icon-twitter" href="https://twitter.com/share?text=Apis-Battery&url=https%3a%2f%2fblog.steps.info%2f2019%2f05%2f21%2fbattery%2f"
                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                <i class="fa fa-twitter"></i>
                <span class="hidden">Twitter</span>
            </a>
        

        
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fblog.steps.info%2f2019%2f05%2f21%2fbattery%2f"
                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                <i class="fa fa-facebook"></i>
                <span class="hidden">Facebook</span>
            </a>
        

        
            <a class="icon-google-plus" href="https://plus.google.com/share?url=https%3a%2f%2fblog.steps.info%2f2019%2f05%2f21%2fbattery%2f"
              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
              <i class="fa fa-google-plus"></i>
                <span class="hidden">Google+</span>
            </a>
        
        
    </div>
</footer>

        
    <div class="comments">
        
    </div>

    </article>
</div>

            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="site-title-wrapper">
                    <h1 class="site-title">
                        <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                    </h1>
                    <a class="button-square button-jump-top js-jump-top" href="#">
                        <i class="fa fa-angle-up"></i>
                    </a>
                </div>

                <p class="footer-copyright">
                    <span>&copy; 2020 / Powered by <a href="https://gohugo.io/">Hugo</a></span>
                </p>
                <p class="footer-copyright">
                    <span><a href="https://github.com/roryg/ghostwriter">Ghostwriter theme</a> By <a href="http://jollygoodthemes.com">JollyGoodThemes</a></span>
                    <span>/ <a href="https://github.com/jbub/ghostwriter">Ported</a> to Hugo By <a href="https://github.com/jbub">jbub</a></span>
                </p>
            </div>
        </footer>

        <script src="https://blog.steps.info/js/jquery-1.11.3.min.js"></script>
        <script src="https://blog.steps.info/js/jquery.fitvids.js"></script>
        <script src="https://blog.steps.info/js/scripts.js"></script>
    </body>
</html>

